웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
안녕하세요! 웹이즈프리입니다😊
"폰트 크기를 반응형에서 사용하면서 문득 드는 생각 중 하나..."
CSS를 사용하면 반응형 및 모바일 웹사이트를 구축하다보면 최대 폰트 크기를 지정하면 편리할 것 같다는 생각을 합니다. 예를들어 바로 사용할 수 있는 max-font-size라는 속성이 있다면 어떨까요?
폰트 크기 최대값 설정 방법은 없다...
결론부터 말하면 해당 속성은 없습니다. 없지만 비슷하게 구현할 수는 있습니다. 예를들어 다음과 같은 방법들이 존재합니다. 아래의 방법은 자바스크립트를 사용한 방법도 포함합니다.
1. JavaScript를 활용한 방법
특정 요소의 글꼴 크기를 확인하고, 그 크기가 우리가 원하는 최대 값보다 크면 줄이는 작업을 자바스크립트를 사용하여 구현하는 것도 가능합니다. 예를들어 아래의 html 텍스트의 크기를 얻고 이 값이 특정 값을 넘는 경우 이를 최대 값으로 고정하는 방법입니다. css는 다음과 같이 되겠습니다.
<div id="textDiv">This is some text.</div>
위 html의 텍스트 요소인 #textDiv의 폰트 값을 알아내 아래와 같이 고정할 수 있습니다. 최대값이 24px인 경우의 예제입니다.
var div = document.getElementById('textDiv');
var computedStyle = window.getComputedStyle(div);
var fontSize = parseFloat(computedStyle.fontSize);
if (fontSize > 24) { // if the computed font size is greater than 24px
div.style.fontSize = '24px'; // set it to 24px
}
var computedStyle = window.getComputedStyle(div);
var fontSize = parseFloat(computedStyle.fontSize);
if (fontSize > 24) { // if the computed font size is greater than 24px
div.style.fontSize = '24px'; // set it to 24px
}
2. css clamp() 함수 사용하기
이 방법은 css의 clamp() 함수를 사용하여 단위 값을 설정하는 방법입니다. 개인적으로 이 방법이 위의 방법보다는 선호되는데 일단 스크립트가 필요하지 않고 css만으로 설정이 가능합니다. 또한 동적으로 크기를 조절해주기 때문에 반응형 사이트에서 특히 유용하게 사용할 수 있습니다.
clamp()의 간단한 사용 예제는 다음과 같습니다.
.my-text {
font-size: clamp(10px, 4vw, 30px);
}
font-size: clamp(10px, 4vw, 30px);
}
위 코드는 글꼴 크기를 최소 10px, 최대 30px로 설정합니다. 이 때 두 사이의 값은 설정된 뷰포트의 너비 4%를 기반으로 조정되게 됩니다. clamp()는 잘 사용하면 매우 유용한데 간략하게 clamp(최소값, 선호값, 최대값)으로 설정하게 됩니다.
clamp(최소값, 선호값, 최대값)
즉 최소값, 최대값의 범위를 지정하여 사용할 수 있다는 장점이 있습니다.
3. 미디어 쿼리를 사용하기
이 방법 역시 css만으로 가능합니다. 화면 크기에 따라 글꼴 크기를 다르게 지정하고 싶으면서도 일정 화면에서는 미디어 쿼리를 사용하여 값을 최대 또는 최소값으로 고정하여 사용할 수 있죠.
.my-text {
font-size: 3vw;
}
@media screen and (max-width: 1024px) {
.my-text {
font-size: 12px;
}
}
font-size: 3vw;
}
@media screen and (max-width: 1024px) {
.my-text {
font-size: 12px;
}
}
위 예제는 화면이 width 1024px보다 작아질 경우 최소값으로 12px의 폰트 크기를 설정하기 위해서 사용된 예제입니다.
여기까지 폰트의 최대 또는 최소값의 사용 방법에 대하여 간략하게 알아보았습니다.
아래의 글도 찾고 계시지 않나요?